<template>
    <nav class="app-nav">
        <router-link to="Home" @click.native="changeNavImg">
            <div class="nav-item" >
                <div class="homeImg" :class="homeImgOn"></div>
            </div>
        </router-link>
        <router-link to="Cart" @click.native="changeNavImg">
            <div class="nav-item" >
               <div class="cartImg" :class="cartImgOn">
                   <span class="cart-counter" v-show="cartCounter > 0"> {{ cartCounter }}</span>
               </div>
            </div>
        </router-link>
        <router-link to="Profile" @click.native="changeNavImg">
            <div class="nav-item" >
                <div class="profileImg" :class="profileImgOn"></div>
            </div>

        </router-link>
    </nav>
</template>

<script>
    export default {
        name: "Nav",
        data () {
            return {
                homeImgOn: '',
                cartImgOn: '',
                profileImgOn: '',
                imgLoadCount: 0
            }
        },
        methods: {
            //点击导航菜单时，更新数据，触发 updated
            changeNavImg () {
              console.log('change');
                this.homeImgOn = '';
                this.cartImgOn = '';
                this.profileImgOn = '';
            },

            // 更新导航图标
            autoChangeCurrentImg() {
                let curPath = this.currentPath;
                if (curPath.includes('Home')) {
                    this.homeImgOn = 'homeImgOn';
                    this.cartImgOn = '';
                    this.profileImgOn = '';
                } else if(curPath.includes('Cart')){
                    this.homeImgOn = '';
                    this.cartImgOn = 'cartImgOn';
                    this.profileImgOn = '';
                } else if(curPath.includes('Profile')) {
                    this.homeImgOn = '';
                    this.cartImgOn = '';
                    this.profileImgOn = 'profileImgOn';
                } else {
                    this.homeImgOn = '';
                    this.cartImgOn = '';
                    this.profileImgOn = '';
                }
            }
        },
        computed: {
            cartCounter () {
                return this.$store.state.cartCounter;
            },
            currentPath () {
                return this.$route.path;
            },
        },
        mounted () {
            this.autoChangeCurrentImg();
        },
        updated () {
            this.autoChangeCurrentImg();
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/css/variable";
    .app-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: $NavHeight;
        border: 1px solid #eee;
        background-color: #fff;
        z-index: 999;
        font-size: 0;
    }
    .nav-item {
        height: 100%;
        display: inline-block;
        width: 33%;
        text-align: center;
    }
    .nav-item>div {
        display: inline-block;
        width: $NavHeight * 0.75;
        height: $NavHeight * 0.75;
        margin-top: $NavHeight * 0.125;
    }
    .homeImg {
        background-image: url('../../static/icon/home.png');
        background-repeat: no-repeat;
        background-position: 0 0 ;
        background-size: $NavHeight * 0.75 * 3 $NavHeight * 0.75
    }
    .homeImgOn {
        background-position: 100% 100%;
    }
    .cartImg {
        background-image: url('../../static/icon/cart.png');
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: $NavHeight * 0.75 * 3 $NavHeight * 0.75;
    }
    .cartImgOn {
        background-position: 100% 100%;
    }

    .profileImg {
        background-image: url('../../static/icon/profile.png');
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: $NavHeight * 0.75 * 3 $NavHeight * 0.75;
    }
    .profileImgOn {
        background-position: 100% 100%;
    }

    .cart-counter {
        position: absolute;
        width: 25px;
        height: 20px;
        top: 5px;
        line-height: 20px;
        background-color: #ff65af;
        border-radius: 40%;
        color: #fff;
        font-size: 10px;
    }

</style>
